<template>
  <div class="control-tree-sub-item">
    <div class="u-row">
      <div class="u-point"></div>
      <div class="u-label" v-if="percent !== '法定代表人'">控制权</div>
      <div class="u-percent">{{ percent }}</div>
      <div class="u-name">{{ name }}</div>
    </div>
    <div class="u-line" v-if="!isLast">
      <div class="u-line-left"></div>
      <div class="u-line-bottom"></div>
    </div>
  </div>
</template>

<script setup name="ControlTreeSubItem">
defineProps({
  percent: String,
  name: String,
  isLast: Boolean,
})
</script>

<style lang="stylus" scoped>
.control-tree-sub-item
  .u-row
    position relative
    z-index 1
    display flex
    align-items center
    .u-point
      margin-right: 8px;
      width: 10px;
      height: 10px;
      background: #b5e8ee;
      border: 3px solid #33bed1;
      border-radius: 50%;
    .u-label
      font-size 16px
      font-weight: 500;
      color: #2970f6;
    .u-percent
      font-size: 20px;
      font-weight: 500;
      color: #2970f6;
    .u-name
      margin-left 14px
      font-size: 16px;
      font-weight: 400;
      color: #616998;
  .u-line
    position relative
    height 50px
    .u-line-left
      position absolute
      left: 4px;
      top: -13px;
      height 50px
      width 0
      border-left 1px dashed #a0a5c1
    .u-line-bottom
      position absolute
      top: 37px;
      left: 4px;
      height 0
      width 30px
      border-top 1px dashed #a0a5c1
</style>
